<template>
  <div class='hot'>
    <div class='item'></div>
      <img class='img' src='https://file-1252776546.cos.ap-hongkong.myqcloud.com/279a53b8b328fb9bbb896408629fa159.jpg'/>
      <h3 class='figure-title'>
        “瑞克摇摆”视频在YouTube上点击量达10亿次
        <span>据外媒报道，互联网上最具人气的恶作剧--瑞克摇摆</span>
      </h3>
  </div>
</template>

<script>
export default {
  name: 'Hot'
}
</script>

<style scoped>
.hot{
  width: 915px;
  position: relative;
  right: 0;
  top: 0;
  z-index: 2;
}
.item{
  width: 305px;
  height: 215px;
  padding: 0 0 10px 10px;
  float: left;
  overflow: hidden;
  position: relative;
}
.img{
  max-width: 295px;
  max-height: 145px;
  width: 100%;
}
.figure-title{
  width: 295px;
  height: 38px;
  position: absolute;
  left: 10px;
  top: 155px;
  font-size: 15px;
  color: #000;
  line-height: 1.2;
  z-index: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}
.figure-title > span{
  color: #888;
  line-height: 1.2;
  z-index: 2;
  padding-left: 10px;
  font-size: 12px;
  font-weight: normal;
}
</style>
